<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>paddle web camera demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body {
                margin: 0 auto;
                position: fixed;
                width: 100%;
                height: 100%;
            }
            video {
                width: 100%;
            }
            #video-tool {
                display: flex;
                justify-content: space-around;
            }
            #isLoading {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, .5);
            }
            #isLoading .loading-text {
                color: #fff;
                font-size: 24px;
            }
            .center {
                position: absolute;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }
            .flex {
                display: flex;
            }
        </style>
    </head>
    <body>
        <video id="video" playsinline></video>
        <div id="tool">
            <div id="video-tool" class="flex">
                <button id="start" type="btn">开始</button>
                <button id="pause" type="btn">暂停</button>
                <button id="switch" type="btn">切换摄像头</button>
            </div>
        </div>
        <div id="isLoading">
            <p class="loading-text center">loading中……</p>
        </div>
    </body>
    <!-- <script src="https://cdn.jsdelivr.net/gh/nicolaspanel/numjs@0.15.1/dist/numjs.min.js"></script> -->
</html>


